<template>
  <footer>
    <div class="cfooter">
      <van-nav-bar>
        <template #left>
          <div class="left">
            <van-field name="checkbox">
              <template #input>
                <van-checkbox v-model="checkbox" shape="round" />
              </template>
            </van-field>
            <span>全选</span>
          </div>
        </template>
        <template #right>
          <div class="right">
            <p>
              <span>合计：</span>
              <span class="total">￥ 0</span>
            </p>
            <div class="settle">结算(0)</div>
          </div>
        </template>
      </van-nav-bar>
      <!-- <router-link :to="{ name: l.name }">
      </router-link> -->
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      checkbox: false,
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.cfooter {
  width: 100%;
  position: fixed;
  bottom: 44px;
  border-top: 8px solid #eee;
  height: 50px;
  font-weight: bold;
  z-index: 1000;
  background-color: #fff;
  .left {
    display: flex;
    align-items: center;
    color: peru;
    ::v-deep .van-cell.van-field {
      width: 40px;
      margin-left: -12px;
    }
    input {
      transform: scale(1.3);
    }
    span {
      margin-left: 10px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .settle {
      background: #d9d9d9;
      width: 60px;
      height: 30px;
      border-radius: 15px;
      color: #333;
      line-height: 30px;
    }
    .total {
      color: #ff80aa;
      font-size: 14px;
      margin-right: 10px;
    }
  }
}
</style>